<script>
    $('.date-picker').datepicker({
        autoclose: true,
        todayHighlight: true
    });
    $('.multiselect').multiselect();

    var option;
    $('#report_design_render').children('button').on('click', function (e) {

        if (undefined !== window.reportChart) {
            window.reportChart.clear();
        }
        var $form = $(this).closest('form');
        $form.attr('action', '/report/design/render/chart');
        $form.ajaxSubmit({
            success: function (res) {
                if (res.success) {
                    // 指定图表的配置项和数据
                    option = {
                        toolbox: {
                            x: 'right',
                            show: true,
                            feature: {
                                magicType: {
                                    show: true,
                                    type: ['line', 'bar', 'stack', 'tiled']
                                },
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        legend: {},
                        tooltip: {},
                        dataset: {
                            // 提供一份数据。
                            source: res.data.source
                        },
                        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                        xAxis: {type: 'category'},
                        // 声明一个 Y 轴，数值轴。
                        yAxis: {},
                        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                        series: res.data.series
                    };
                    // 基于准备好的dom，初始化echarts实例
                    window.reportChart = echarts.init(document.getElementById('report_chart_content'), 'vintage');
                    // 使用刚指定的配置项和数据显示图表。
                    window.reportChart.setOption(option)
                }
            }
        });
        $form.attr('action', '/report/design/render/table');
        $form.ajaxSubmit({
            success: function (res) {
                $('#report_table_content').slideUp(function () {
                    $(this).empty().html(res);
                }).slideDown();
            }
        });
        e.preventDefault();
    });

    /**
     * 重洗加载echarts避免，完成自适应
     */
    $('#report_chart_content').parent().on('resize', function (event) {

        if (undefined !== window.reportChart) {
            window.reportChart.dispose();
            window.reportChart = echarts.init(document.getElementById('report_chart_content'), 'vintage');
            window.reportChart.setOption(option);
        }
    });
</script>
<script>

</script>
<div style="padding: 12px;">
    <form class="form-inline" id="report_design_render" method="POST" action="/report/design/render/chart">
        <input type="hidden" name="rId" th:value="${rId}"/>
        <div style="padding: 8px" class="form-group" th:each="pm : ${paramsBOList}">
            <label th:text="${pm.getTitle()}"></label>
            <th:block th:switch="${pm.controlType}">
                <th:block th:case="1">
                    <select class="form-control" th:name="${pm.getName()}">
                        <option th:each="data : ${pm.kvList}" th:selected="${data.selected}" th:text="${data.value}"
                                th:value="${data.key}"></option>
                    </select>
                </th:block>
                <th:block th:case="2">
                    <select class="form-control multiselect" th:name="${pm.getName()}" multiple>
                        <option th:each="data : ${pm.kvList}" th:selected="${data.selected}" th:text="${data.value}"
                                th:value="${data.key}"></option>
                    </select>
                </th:block>
                <th:block th:case="3">
                    <input class="form-control date-picker" type="text" th:name="${pm.name}"
                           th:value="${pm.defaultValue}"
                           data-date-format="dd-mm-yyyy"/>
                </th:block>
                <th:block th:case="4">
                    <input class="form-control" type="text" autocomplete="off" th:name="${pm.name}"
                           th:value="${pm.defaultValue}">
                </th:block>
                <th:block th:case="5">
                    <input th:name="${pm.getName()}" class="ace ace-checkbox-2"
                           type="checkbox">
                    <span class="lbl"></span>
                </th:block>
            </th:block>
        </div>
        <button style="margin-left: 6px;" type="button" class="btn btn-default btn-sm">搜索</button>
        <a id="report_design_render_export" style="margin-left: 6px;" class="btn btn-success btn-sm"><span
                class="glyphicon glyphicon-export"></span> 导出excel</a>
    </form>
</div>
<div id="report_chart_content" style="width: auto; height: 100%; min-height: 250px; max-height: 300px;"></div>
<div id="report_table_content"></div>

